<!-- 排班设置 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="排班管理">排班管理</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
          <el-button type="primary" @click="dialogTableVisible = true">新建</el-button>
      </span>
      <span class="rthc-handle-more">
        <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <el-icon>
            <setting/>
        </el-icon>
        </span>
       <template v-slot:dropdown>
         <el-dropdown-menu>
           <el-dropdown-item icon="el-icon-plus">新建</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-plus-outline">流程审批</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check">删除</el-dropdown-item>
         </el-dropdown-menu>
       </template>
    </el-dropdown>
      </span>
    </div>
  </div>
  <div style="height: 70%; min-height: 235px;">
    <div class="ss-list-title" style="padding: 10px;">
      <el-form :model="formData" ref="vForm" label-position="left" label-width="80px"
               size="default" @submit.prevent>
        <el-row>
          <el-col :span="3" class="grid-cell" style="background: #F4F4F4;padding-left: 10px">
            <div class="static-content-item">
              <div>日期：</div>
            </div>
          </el-col>
          <el-col :span="18" class="grid-cell">
            <el-form-item label="" label-width="0" prop="riqisel">
              <el-radio-group v-model="formData.riqisel" size="large">
                <el-radio-button v-for="(item, index) in riqiselOptions" :key="index" :label="item.value"
                                 :disabled="item.disabled" style="{display: inline}" @change="dateChange">{{item.label}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="grid-cell" style="background: #F4F4F4;padding-left: 10px">
            <div class="static-content-item">
              <div>排班情况：</div>
            </div>
          </el-col>
          <el-col :span="18" class="grid-cell">
            <el-form-item label="" label-width="0" prop="pbqk">
              <el-radio-group v-model="formData.pbqk" size="large">
                <el-radio-button v-for="(item, index) in pbqkOptions" :key="index" :label="item.value"
                                 :disabled="item.disabled" style="{display: inline}" @change="statusChange">{{item.label}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="rthc-list-table" style="margin-top: 0;">
      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" prop="work_id" :selectable="selByWorkId"  width="55"/>
        <el-table-column label="编号" prop="eworkId" width="80px"/>
        <el-table-column label="姓名" prop="ename"/>
        <el-table-column label="部门" prop="dname" />
        <el-table-column label="岗位" prop="pname" />
        <el-table-column label="开始时间" prop="initiate_date"/>
        <el-table-column label="结束时间" prop="closure_date"/>
        <el-table-column label="排班状态" prop="status">
          <template #default="scope">
            <el-button v-if="scope.row.status === 0" @click="delschedule(scope.row.eworkId)">取消排班</el-button>
            <el-button v-else @click="staschedule(scope.row)">开始排班</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="">
        <input type="button" value="上一页" @click="prevPage">
        <input type="button" value="下一页" @click="nextPage">
      </div>
    </div>
  </div>
<!-- 分界面 - 主界面  -->
  <el-dialog v-model="dialogTableVisible" title="新建排班" width="1000px">
    <el-form :model="insBackstageParams" label-position="left" label-width="80px"
             size="default" @submit.prevent>
      <el-row>
        <el-col :span="4" class="grid-cell">
          <div class="static-content-item">
            <div>排班开始日期：</div>
          </div>
        </el-col>
        <el-col :span="18" class="grid-cell">
          <el-form-item label="" label-width="0" prop="initiateDate">
            <el-date-picker v-model="insBackstageParams.initiateDate" type="date"
                            class="full-width-input" size="large"
                            :disabled-date="publishDateAfter"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="grid-cell">
          <div class="static-content-item">
            <div>排班结束日期：</div>
          </div>
        </el-col>
        <el-col :span="18" class="grid-cell">
          <el-form-item label="" label-width="0" prop="closureDate">
            <el-date-picker v-model="insBackstageParams.closureDate" type="date"
                            class="full-width-input" size="large"
                            :disabled-date="offlineDateAfter"
                            format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="grid-cell">
          <div class="static-content-item">
            <div>班次：</div>
          </div>
        </el-col>
        <el-col :span="8" class="grid-cell">
          <el-form-item label="" label-width="0" prop="shiftId" class="required">
            <el-input v-model="insBackstageParams.shiftName" @focus="empTableVis = true" size="large" type="text" readonly clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" class="grid-cell">
          <div class="static-content-item">
            <div>排班人员：</div>
          </div>
        </el-col>
        <el-col :span="8" class="grid-cell">
          <div class="static-content-item">
            <el-button @click="deptTableVis = true">新增</el-button>
            <el-button @click="removeOperation">删除</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
          :data="arrar"
          border
          style="width: 100%; margin-top: 20px"
          @selection-change="romoveTable"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column property="workId" label="编号" width="80" />
        <el-table-column property="empName" label="姓名" width="160" />
        <el-table-column property="dept.deptName" label="部门" width="auto"/>
        <el-table-column property="position.name" label="岗位" width="auto"/>
      </el-table>
    </el-form>
    <el-row>
      <el-col :span="6" :push="20" class="grid-cell">
        <div class="static-content-item">
          <el-button @click="submitForm">提交</el-button>
          <el-button @click="dialogTableVisible = false">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
<!--  分界面 - 人员选择  -->
  <el-dialog v-model="deptTableVis" title="排班人员选择" width="700px">
   <el-row>
     <el-button style="margin-top: 3px" @click="numTransfer">添加</el-button>
    <span style="line-height: 37px;margin:0 10px 0 20px">选择部门:</span>
     <el-select v-model="value" class="m-2" @change="ObtainByDeptId" placeholder="" size="large">
       <el-option
           v-for="item in deptoptions"
           :key="item.id"
           :label="item.label"
           :value="item.value"
       />
     </el-select>
   </el-row>
    <el-table :data="gridData" @selection-change="seleByEmp">
      <el-table-column type="selection" :selectable="selectableStatus" width="55"/>
      <el-table-column property="workId" label="编号" width="80" />
      <el-table-column property="empName" label="姓名" width="160" />
      <el-table-column property="dept.deptName" label="部门" width="auto"/>
      <el-table-column property="position.name" label="岗位" width="auto"/>
    </el-table>
  </el-dialog>
<!--  分界面 - 班次选择  -->
  <el-dialog v-model="empTableVis" title="班次选择">
    <el-table :data="shifTable" @row-click="byval">
<!--      <el-table-column type="selection" prop="enabled"  :selectable="selectableStatus" width="55"/>-->
      <el-table-column property="sid" label="班次编号" width="90" />
      <el-table-column property="name" label="班次名称" width="200" />
      <el-table-column property="otime" label="工作时间段" width="160"/>
    </el-table>
  </el-dialog>
</template>



<script>
import {addListBySch, delByWorids, getListScheduling, selAll} from "../../../network/per/ShiftSetUp";
import {getDeptOptions} from "../../../network/sys/dept";
import {getWorkSchedule} from "../../../network/emp";

export default {
  name: "SettingsScheduling",
  components: {},
  props: {},
  data() {
    return {
      // 人员
      gridData:[],
      // 部门
      deptoptions:[],
      // 班次
      shifTable:[],
      // 选择人员 - 显示信息
      optionEmp:[],
      // 人员编号
      empIds:[],
      // 新增 - 后台传值 - 参数
      insBackstageParams:[{
        initiateDate: "",
        closureDate: "",
        shiftId: "",
        workIds:[],
        shiftName:""
      }],
      // 排班人员选择
      deptTableVis:false,
      // 班次选择
      empTableVis:false,
      // 主 分界面展示数据
      arrar:[],
      dialogTableVisible:false,
      // 删除表格行
      delarr:[],
      // 查询条件
      formData: {
        riqisel: null,
        pbqk: null,
      },
      paging: {
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 10
      },
      hidePaging: false,
      value: '',
      tableData:[],
      exhibitTable:[],
      // 开始排班 中间表
      middlewareTable:[],
      riqiselOptions: [
        {
          "label": "全部",
          "value": 0
        }, {
          "label": "今天",
          "value": 1
        }, {
          "label": "昨天",
          "value": 2
        }, {
          "label": "近7天",
          "value": 3
        }, {
          "label": "本周",
          "value": 4
        }, {
          "label": "上周",
          "value": 5
        }
        ,  {
          "label": "本月",
          "value": 6
        }, {
          "label": "上一月",
          "value": 7
        }, {
          "label": "本季",
          "value": 8
        }
      ],
      pbqkOptions: [
          {
        "label": "全部",
        "value": 0
      }, {
        "label": "已排",
        "value": 1
      }, {
        "label": "未排",
        "value": 2
      }
      ],
    }
  },
  mounted() {
   this.shifinit();
    // 初始化部门
    getDeptOptions().then(data => {
      this.$response.handle({
        data: data,
        successFn: () => {
          let a = [{
            deptName : "全部",
            id : 0
          }]
          this.deptoptions = data.data
          this.deptoptions.push(a)
        }
      })
    });
    this.initEmp();
    this.initScheduling();
  },
  methods: {
    // 开始排班
    staschedule(val){
      console.log("middlewareTable -->" , this.middlewareTable)
      if (this.middlewareTable.length > 0){
        let a = [{
          workId:val.eworkId,
          empName:val.ename,
          dept:{
            deptName : val.dname
          },
          position:{
            name : val.pname
          }
        }]
        this.arrar = a;
        this.dialogTableVisible = true
      }else{
        let a = [{
          workId:val.eworkId,
          empName:val.ename,
          dept:{
            deptName : val.dname
          },
          position:{
            name : val.pname
          }
        }]
        this.arrar = a;
        this.dialogTableVisible = true
      }
    },
    // 获取当前行 取消排班
    delschedule(val){
      if (typeof this.multipleSelection !== "undefined"){
        delByWorids(this.multipleSelection).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
          }
          this.initScheduling();
        })
      }else{
        delByWorids(val).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
          }
          this.initScheduling();
        })
      }
    },
    // 限制选中
    selByWorkId:function (row,index){
      let a = this.formData.pbqk
      if (a === 1 && row.status === 0){
        return true;
      }else if(a === 2 && row.status !== 0){
        return true
      }
      return false
    },
    // 根据日期查询
    dateChange(){
      console.log("riqisel ",this.formData.riqisel)
      getListScheduling(this.formData,this.paging).then((das)=>{
        this.exhibitTable = das.data
        this.paging.totalPage=Math.ceil(this.exhibitTable.length / this.paging.pageSize);
        this.paging.totalPage = this.paging.totalPage === 0 ? 1 : this.paging.totalPage;
        this.getCurrentPageData();
      })
    },
    // 根据排班状态查询
    statusChange(){
      getListScheduling(this.formData,this.paging).then((das)=>{
        this.exhibitTable = das.data
        this.paging.totalPage=Math.ceil(this.exhibitTable.length / this.paging.pageSize);
        this.paging.totalPage = this.paging.totalPage === 0 ? 1 : this.paging.totalPage;
        this.getCurrentPageData();
      })
    },
    getCurrentPageData() {
      console.log("exhibitTable -> ", this.exhibitTable)
      let begin = (this.paging.currentPage - 1) * this.paging.pageSize;
      let end = this.paging.currentPage * this.paging.pageSize;
      this.tableData = this.exhibitTable.slice(
          begin,
          end
      );
    },
    //上一页
    prevPage() {
      if (this.paging.currentPage === 1) {
        return false;
      } else {
        this.paging.currentPage--;
        this.getCurrentPageData();
      }
    },
    // 下一页
    nextPage() {
      if (this.paging.currentPage === this.paging.totalPage) {
        return false;
      } else {
        this.paging.currentPage++;
        this.getCurrentPageData();
      }
    },
    // 展示表格初始化
    initScheduling(){
      console.log("表格初始化")
      getListScheduling(this.formData,this.paging).then((das)=>{
        console.log("das -<> - ",das)
        this.tableData = das.data
      })
    },
    // 删除表格行
    removeOperation(){
      let d = this.delarr
      this.arrar.forEach((v,i)=>{
        for (let j = 0; j < d.length; j++) {
          if (d[j] === v.workId){
            this.arrar.splice(j,1)
          }
        }
      })
    },
    // 选择移除对象
    romoveTable(val){
      this.delarr = []
      for (let i = 0; i < val.length; i++) {
        this.delarr.push(val[i].workId)
      }
    },
    // 限制开始时间
    publishDateAfter(time){
      return time.getTime() < Date.now();
    },
    // 限制结束时间
    offlineDateAfter(time){
       return time.getTime() < Date.now() || time.getTime() < this.insBackstageParams.initiateDate;
    },
    // 人员初始化
    initEmp(){
      getWorkSchedule(0).then((das)=>{
        console.log("人员初始化 -> ",das)
        this.gridData = das.data
      })
    },
    // 人员选择约束
    selectableStatus(val){
      if (val.status === 1){
        return true
      }
    },
    seleByEmp(val){
      this.optionEmp = val;
      console.log("optionEmp -> ",this.optionEmp)
      for (let i = 0; i < val.length; i++) {
        this.empIds.push(val[i].workId)
      }
    },
    // 选择部门
    ObtainByDeptId(val){
      console.log("部门编号 -> " ,val)
      if (val === undefined){
        val = 0
      }
      getWorkSchedule(val).then((das)=>{
        console.log("人员初始化 -> ",das)
        this.gridData = das.data
        val = undefined
      })
    },
    // 数组转移
    numTransfer(){
      this.arrar = this.optionEmp;
      this.deptTableVis = false;
    },
    // 选择班次
    byval(row){
      console.log("row--> ",row)
      if(row.enabled === 1){
        this.$notify({
          title: '提醒',
          message: '该班次已暂停使用！请开启后选择！',
          type: 'error'
        })
      }
      this.insBackstageParams.shiftId = row.sid;
      this.insBackstageParams.shiftName = row.name;
    },
    //初始化班次方法
    shifinit(){
      selAll().then((das)=>{
        console.log("初始化",das)
        this.shifTable = das;
      })
    },
    // 获取编号
    handleSelectionChange(val) {
      this.middlewareTable = []
      this.middlewareTable = val;
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].eworkId)
      }
    },
    submitForm() {
        //TODO: 提交表单
        this.insBackstageParams.workIds = [];
        this.arrar.forEach((v,i)=>{
          this.insBackstageParams.workIds.push(v.workId);
        })
        addListBySch(this.insBackstageParams).then((das)=>{
          if (das.code === 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
          }else{
            this.$notify({
              title: '失败',
              message: '这是一条失败的提示消息',
              type: 'error'
            })
          }
          this.dialogTableVisible = false;
          this.initScheduling();
        })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
</style>
<style>
.el-select-dropdown__wrap{
  width: 200px;
}
.el-input__inner{
  position: relative;
  top: -19px;
  margin-top: 20px;
}
.static-content-item{
  margin-top: 10px;
}
.ss-list-title {
  background: white;
  height: 100px;
}
.el-row{
  border-bottom: 1px solid #F4F4F4;
}
.grid-cell{
  height: 40px;
}
</style>